<template>
  <el-dialog
    v-model="openDialog"
    @closed="handleClose"
    :title="`用户信息${isEdit ? '编辑' : '查看'}`"
    width="850px"
  >
    <el-scrollbar height="500px">
      <el-form
        :model="formData"
        label-width="120px"
        ref="form"
        :rules="rules"
        :inline="true"
      >
        <el-form-item label="用户姓名：" prop="userName" style="width: 320px">
          <el-input
            v-model="formData.userName"
            style="width: 200px"
            :readonly="!isEdit"
            maxlength="30"
          />
        </el-form-item>
        <el-form-item label="排序：" style="width: 320px">
          <el-input
            v-model="formData.gruopers"
            style="width: 200px"
            :readonly="!isEdit"
          />
        </el-form-item>
        <el-form-item label="用户账号：" style="width: 320px">
          <el-input
            v-model="formData.gruopers"
            style="width: 200px"
            :readonly="!isEdit"
          />
        </el-form-item>
        <el-form-item label="人员类型：" style="width: 320px">
          <el-select
            v-model="formData.userType"
            style="width: 200px"
            :readonly="!isEdit"
          >
            <el-option label="正式" value="shanghai" />
            <el-option label="试用期" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item :label="isEdit ? '密码：' : ''" style="width: 320px">
          <el-input
            v-if="isEdit"
            v-model="formData.gruopers"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="人员状态：" style="width: 320px">
          <el-radio-group v-model="formData.userState">
            <el-radio :label="3">在职</el-radio>
            <el-radio :label="6">离职</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="isEdit ? '密码确认：' : ''" style="width: 320px">
          <el-input
            v-if="isEdit"
            v-model="formData.gruopers"
            style="width: 200px"
            :readonly="!isEdit"
          />
        </el-form-item>
        <el-form-item label="入职日期：" style="width: 320px">
          <el-date-picker
            v-model="formData.entryDay"
            type="date"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="账户状态：" style="width: 320px">
          <el-radio-group v-model="formData.accountState">
            <el-radio :label="3">启用</el-radio>
            <el-radio :label="6">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="办公电话：" style="width: 320px">
          <el-input
            v-model="formData.gruopers"
            style="width: 200px"
            type="number"
            :readonly="!isEdit"
          />
        </el-form-item>
        <el-form-item label="性别：" style="width: 320px">
          <el-select
            v-model="formData.gender"
            style="width: 200px"
            :readonly="!isEdit"
          >
            <el-option label="男" value="shanghai" />
            <el-option label="女" value="beijing" />
          </el-select>
        </el-form-item>

        <el-form-item label="手机号码：" style="width: 320px">
          <el-input
            v-model="formData.gruopers"
            style="width: 200px"
            type="number"
            :readonly="!isEdit"
          />
        </el-form-item>
        <el-form-item label="出生日期：" style="width: 320px">
          <el-date-picker
            v-model="formData.bornday"
            type="date"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="电子邮件：" style="width: 320px">
          <el-input
            v-model="formData.gruopers"
            style="width: 200px"
            type="number"
            :readonly="!isEdit"
          />
        </el-form-item>
        <el-form-item label="岗位：" style="width: 320px">
          <el-input
            v-model="formData.gruopers"
            style="width: 200px"
            type="number"
            :readonly="!isEdit"
          />
        </el-form-item>
        <el-form-item label="人员工号：" style="width: 320px">
          <el-input
            v-model="formData.gruopers"
            style="width: 200px"
            type="number"
            :readonly="!isEdit"
          />
        </el-form-item>
        <el-form-item label="部门：" style="width: 320px">
          <el-input
            v-model="formData.gruopers"
            type="textarea"
            style="width: 200px"
            :readonly="!isEdit"
          />
        </el-form-item>
        <el-form-item label="头像：" style="width: 320px">
          <el-image
            style="width: 100px; height: 120px"
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            :preview-src-list="[
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
            ]"
          />
        </el-form-item>
        <el-form-item label="说明：" style="width: 420px">
          <el-input
            v-model="formData.gruopers"
            type="textarea"
            style="width: 300px"
            rows="4"
            :readonly="!isEdit"
          />
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <template #footer>
      <el-button type="primary" @click="confirmBind">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Search from "@iconify-icons/ep/search";
export default {
  name: "jobsTreeTransfer",

  components: {},
  props: {
    // 是否编辑
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      Search,
      openDialog: false,
      formData: {
        userName: "",
        gruopers: []
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户姓名", trigger: "change" }
        ]
      }
    };
  },

  methods: {
    useRenderIcon,
    onChangeVisible() {
      this.openDialog = true;
    },

    confirmBind() {
      this.openDialog = false;
    },
    handleClose() {
      this.allSearchValue = this.hasSearchValue = "";
      this.hasSelectionList = [];
      this.openDialog = false;
    }
  },

  mounted() {}
};
</script>

<style lang="scss" scoped></style>
